<!--
 * @Description: 选择岗位
 * @Author: wangwangwang
 * @Date: 2020-09-16 12:05:17
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-23 11:29:42
-->
<template>
  <el-dialog v-dialogDrag width="50%" title="选择岗位" :before-close="hanldeClose" :visible.sync="visible">
    <div class="transfer-container">
      <el-row :gutter="10">
        <el-col :span="9">
          <p class="hanlde-title">未选:</p>
          <div class="hanlde-container">
            <el-checkbox-group v-model="selectPositions">
              <div v-for="item in positionData" :key="item.id">
                <el-checkbox :label="item">{{item.name}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="handle-submit">
            <div>
              <el-button class="bottom_all" style="margin-left:0;" @click="setSelectedData">
                <i class="el-icon-arrow-right el-icon--right" />
              </el-button>
            </div>
            <div>
              <el-button class="bottom_all" style="margin-left:0;" @click="cancleSelectedData">
                <i class="el-icon-arrow-left el-icon--left"></i>
              </el-button>
            </div>
            <div>
              <el-button class="bottom_all_two" style="margin-left:0;" @click="clearSelectedData">清空已选</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <p class="hanlde-title">已选:</p>
          <div class="hanlde-container">
            <el-checkbox-group v-model="choisedData">
              <div v-for="item in selectedData" :key="item.id">
                <el-checkbox :label="item">{{item.name}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="bottom_all_two" @click="hanldeClose">取 消</el-button>
      <el-button class="bottom_all" @click="hanldeSure">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { queryPage } from "@/api/basedata/jobs";

export default {
  props: ["visible"],
  data() {
    return {
      selectedData: [],
      choisedData: [],
      selectPositions: [],
      positionData: [],
    };
  },
  methods: {
    /**
     * @Description: 设置已选
     * @Param:
     * @Author: wangwangwang
     */
    setSelectedData() {
      const copyData = this.selectPositions.map((item) => ({
        name: item.name,
        id: item.id,
        type: 3,
      }));
      const concatData = [...copyData, ...this.selectedData];
      const hash = {};
      const newData = concatData.reduce((item, next) => {
        hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
        return item;
      }, []);
      this.selectedData = newData;
    },
    /**
     * @Description: 取消已选
     * @Param:
     * @Author: wangwangwang
     */
    cancleSelectedData() {
      this.selectedData = this.selectedData.filter(
        (item) => !this.choisedData.some((ele) => ele.id === item.id)
      );
      this.choisedData = [];
    },
    /**
     * @Description: 清除已选
     * @Param:
     * @Author: wangwangwang
     */
    clearSelectedData() {
      this.choisedData = [];
      this.selectedData = [];
    },
    /**
     * @Description: 获取角色数据
     * @Param:
     * @Author: wangwangwang
     */
    initPosition() {
      const data = {
        page: 1,
        pageSize: 1000,
        enable: 1,
      };
      queryPage(data).then((res) => {
        if (res.code === 1001) {
          this.positionData = res.data.data;
        }
      });
    },
    hanldeClose() {
      this.$emit("closeModel");
    },
    hanldeSure() {
      this.$emit("getPerson", this.selectedData);
    },
  },
  mounted() {
    this.initPosition();
  },
};
</script>
<style lang="scss" scoped>
.transfer-container {
  .hanlde-title {
    margin-bottom: 10px;
  }
  .hanlde-container {
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    height: 500px;
    overflow: scroll;
    padding: 15px;
  }
}
.handle-submit {
  padding-top: 200px;
  text-align: center;
  div {
    margin: 20px 0px;
  }
}
</style>

